استایل های خطی فایل متنی html که در ابتدای دوره ایجاد کرده بودید را باز کنید. بر روی منوی File->Seve As کلیک کنید. فایل را با عنوان جدید newpage.html ذخیره کنید. فراموش نکنید که قبل از کلیک روی دکمه ذخیره، آیتم Save As Type را به All Files تغییر دهید. متن را برای عنوان صفحه در تگ Title وارد کنید. یک تگ عنوان H1 اضافه کرده و عبارتی را درون آن تایپ نمایید. حال یک پاراگراف بعد از تگ عنوان وارد نمایید. برای ایجاد استایل خطی بعد از اولین H1 کلیک کنید. کلید فاصله (space) را یکبار فشرده و عبارت زیر را تایپ نمایید: توجه کنید که هیچ فاصله ای بعد از علامت : و قبل از کلمه center وجود نداشته باشد. کدهای html شما باید شبیه تصویر زیر باشد: بعد از تکمیل کد نویسی، نتیجه را در مرورگر مشاهده نمایید. همانطور که ملاحظه می کنید، عنوان وارد شده، در وسط صفحه قرار گرفته است: بنابراین برای وسط چین کردن عناصر روی صفحه، می بایست از ویژگی text-align استفاده کنید. بعد از علامت : مقدار ویژگی را وارد نمایید که در مثال فوق کلمه center می باشد. تمرین: مشابه کلمه center که برای وسط چین کردن عناصر استفاده می شود، می توانید از مقادیر left و right برای چپ چین و راست چین کردن عناصر در صفحه استفاده نمایید. آنها را امتحان نمایید. استایل های

نحوه استفاده از کلاس های CSS و انتخاب گرهای ID تا اینجا طریقه تنظیم کردن صفحات استایل دهی را یاد گرفته اید و می دانید که اگر یک انتخاب گر html تنظیم کنید، تمام تگهای html از آن نوع به مقدار ویژگی که شما تعیین کرده اید، تغییر می یابند. بعنوان مثال اگر html به صورت زیر داشته باشید: در این صورت متن تمام عنوان های H1 که در میان تگ BODY استفاده کرده اید به رنگ قرمز خواهند شد. به عبارتی دیگر، برای استفاده از انتخاب گرهای جدید، لازم نیست که چیزی به کدهای html اضافه شود و تگها به طور معمول نوشته می شوند. اگر چه کلاس و انتخاب گرهای شناسه کمی متفاوت هستند. انتخاب گر کلاس برای تنظیم یک انتخاب گر کلاس، کد نویسی به صورت زیر بود: ابتدا یک نقطه تایپ می شود، سپس نام کلاس نوشته می شود که می تواند به دلخواه انتخاب شود. سپس ویژگی و مقدار به طور معمول نوشته می شوند. مثال: Fontone. در مثال فوق یک انتخاب گر کلاس است. عنوانی است که ما خودمان انتخاب کرده ایم. آنچه که داخل آکولاد قرار دارد می گوید که "هر زمانی که این قاعده استفاده می شود، متن رنگ قرمز شود". شما می توانید این قاعده جدید را برای تمام تگهای html بکار ببرید. مانند زیر: زمانی که از انتخاب گر کلاس استفاده می کنید، ولی کلمه "class" استفاده می شود. بعد از آن یک علامت مساوی (=) و بعد از آ

استایل ها در سه محل می توانند قرار بگیرند: خطی، جاسازی شده در فایل html و در فایل خارجی. استایل دهی خطی: می توانید یک تک استایل را مستقیما در تگ های html قرار دهید. این روش استایل دهی خطی نام دارد. استایل های خطی بر سایر خط ها اولویت دارند. مثال: برای جایگذاری استایل در تگ html، به روش زیر عمل کنید: تگی که می خواهید تغییر کند را بنویسید. یک فاصله دار و کلمه style را تایپ کنید. یک علامت مساوی (=) وارد کنید. علامت نقل قول را تایپ کنید. نام ویژگی را به همراه دو نقطه وارد کنید. مقدار را وارد کنید. علامت نقل قول را مجددا وارد کنید. علامت بزرگتری را برای تگ html وارد کنید. استایل دهی جاسازی شده: استایل دهی جاسازی شده، در قسمت HEAD فایل html قرار داده می شوند. زمانی که استایلی را در قسمت HEAD قرار می دهید، برای شناسایی استایل ها به مرورگر می بایست از دو تگ آغازی و پایانی استایلها استفاده نمایید. ما بین دو تگ ، قواعد css نوشته می شوند. استایل دهی در فایل خارجی: به جای قرار دادن استایل ها در بخش HEAD، می توان تمام آنها را در یک فایل متنی وارد کرد. سپس به مرورگر می گویید که محل قرارگیری این فایل کجا است. سپس این فایل مانند زمانی که در بخش (HEAD) بود عمل کند. فایل خارجی استایل به ص

قواعد CSS به مرورگر می فهماند که ظاهر یک صفحه html چگونه باشد و چه کاری انجام دهد. یک قاعده css، مشخص می کند که یک تگ html چه شکلی داشته باشد و یا می توانید قواعد خود را برای بکار بردن در قسمتهای مختلف ایجاد کنید. به عنوان مثال، می توان قاعده ای تنظیم کرد که به مرورگر بگوید که تمام تگهای چگونه تنظیم شوند و اولین خط آنها فرو رفته باشد، یا می توانید قاعده پاراگراف خود را ایجاد نمایید و آنرا برای یک پاراگراف بکار برید و نه برای تمام پارگرافها. یک قاعده سه قسمت دارد: انتخاب گر، ویژگی و مقدار. انتخاب گر ID مشابه انتخاب گر کلاس است، اما برای شناسایی یک عنصر خاص در صفحه استفاده می شود. مثلا یک عنصر جعبه متنی در صفحه. مثال زیر، نحوه استفاده انتخاب گر را نشان می دهد: در فرمت اول، H1 یک انتخاب گر html است. توجه کنید که علامتهای کوچکتری و بزرگتری از تگ حذف شده اند. با نوشتن یک انتخاب گر html، تمام تگهای html از آن نوع در صفحه به فرمتی که تنظیم کرده اید تغییر می یابند. بنابراین برای فرمت H1 که در بالا تنظیم شده است، تمام متنهایی که داخل تگ H1 نوشته شده اند، به رنگ قرمز تغییر خواهند کرد. استایل دوم، NewFont. یک انتخاب گر کلاس است. دقت کنید که انتخاب گر کلاس با یک نقطه آغاز می شود. سپس نام کلاس نوشته می شود (هر عنوان که بخواهید). بین نقطه و عنوان کلاس و همچنین بین کلمات در عنوان کلاس فاصله ای

مقدمه ای بر صفحات قالب بندی آبشاری html ابزاری برای طراحی گرافیک صفحه نیست، بلکه روشی آسان برای نمایش متن در مرورگر است، مانند روشی که واژه پرداز word متون در صفحه نمایش می دهد. تگ ها طی سالیان سال اضافه شدند تا رنگ و روی به یک صفحه ساده (که در ابتدا طوسی رنگ بود) برسند. به مرور عناصری مانند تصاویر، جدول ها و فرم ها اضافه شدند. این عناصر می توانند مستقیما به وسیله کدهای html در صفحه نمایش داده شوند. طراحان خواهان روش های بهتری برای نمایش کارشان روی صفحه است. html تنها کافی نیست بعد از نوشتن کدهای html، برای اینکه متن یا تصویر را در جای مناسب خود قرار دهید، مجبورید از جدول بندی پیچیده ای برای تنظیم موقعیت عناصر استفاده کنید. و تصور کنید که می خواهید یک پارگراف خاص پشت زمینه رنگی داشته باشد و نه تمام صفحه، انجام این کار با html کمی مشکل است. در مورد لینک ها چه؟ آیا توسط html راهی وجود دارد که زیر خط لینک ها فعال و غیرفعال شود؟ پاسخ تمام این سوال ها به استفاده از صفحات قالب بندی آبشاری (css) ختم می شود. یک استایل، روش دیگری برای تنظیم چینش عناصر در صفحه هستند و به صفحه وب روح می دهند. یک صفحه قالب بندی چیست؟ اگر از یک واژه پرداز متنی مانند word استفاده کرده باشید می دانید که چگونه می توان به واژه پرداز گفت که رنگ متن را مشکی کند. به عنوان مثال تمام عنوان های صفحه می توانند سایز 28،

می توانیم به کمک html یک لیست سر خط دار در صفحه ایجاد نماییم. دو نوع لیست وجود دارد: لیستهای مرتب و لیستهای نا مرتب (ordered lists and unordered list) لیست مرتب لیستی است که از اعداد، حروف، اعداد یونانی و یا ترکیبی از آنها استفاده می کند. به صورت زیر: لیستهای نامرتب از بالت استفاده می کنند، به صورت زیر: برای ایجاد یک لیست با اعداد یا حروف، از تگ زیر استفاده می شود: OL به معنی لیست مرتب می باشد. اما تگهای فوق به تنهایی لیست ایجاد نمی کنند و می بایست تگ دیگری به نام تگ Li داخل آن قرار بگیرد. به این معنا که برای آیتم لیست یک تگ Li وجود دارد. بنابراین برای لیستی که سه آیتم دارد، کد زیر را خواهیم داشت: برای ایجاد لیست سر خط دار، از تگ UL استفاده می شود. UL به معنای لیست نامرتب می باشد. تگ UL دقیقا مشابه تگ OL استفاده می شود. خط عنوان تگ تغییر می کند. برای هر دو نوع لیست مرتب و نامرتب، می توان نوع سر خط دار که بالت باشد یا حروف تعیین کرد. انواع سر خط ها به صورت زیر می باشند: نوع سر خط دار به صورت زیر می توان مشخص کرد: همچنین می توان شروع لیست را مشخص نمود: بنابراین لیست فوق یک لیست با حروف بزرگ است که از حرف هفتم که حرف G می باشد آغاز می شود. برای سر خط های بالت دار

ما بین استفاده شده اند و می توان ترتیب آنها را بر عکس نمود و ابتدا تگ i را قرار داد: دقت کنید که روش زیر صحیح نمی باشد: در فرمت فوق، تگها اشتباهی جاگذاری شده اند. تگهای داخلی می بایست هر دو تگ و تگهای خارجی می بایست هر دو تگ باشند. تگهای فوق را در کدهای قبلی امتحان می کنیم: تغییرات را ذخیره و نتیجه را در مرورگر مشاهده کنید: همچنین می توانید از تگ زیر خط (underline) هم استفاده نمایید: می توان سه تگ فوق را به صورت تودرتو استفاده کرد: کدهای تودرتوی فوق ممکن است کمی گیج کننده باشد، راه حل بهتر و جدیدتر استفاده از ابزاری به نام صفحات (cascaoling stylesheet) استفاده شود. استفاده از استایل ها، امکان تعیین فرمت تمام متن های html را در قسمت head یا بهتر از آن، در یک فایل خارجی فراهم کند. در دروس بعدی نحوه استفاده از صفحات استایل دهی را فرا می گیریم. در درس بعدی نگاهی به لیستها در html خواهیم انداخت. آموزش طراحی وب سایت از پایه>موضوعات مرتبط: <فصل دوم > آموزش طراحی سایت از پایهبرچسبها: طراحی وب سایت , آموزش طراحی وب سایت مقدماتی , آموزش html , تگ bold , استایل دهی آبشاری

اگر تا بحال از یک نرم افزار واژه پرداز مانند word استفاده کرده باشید، می دانید که برای شروع یک پاراگراف جدید کافیست که از کلید Enter استفاده کنید. اشاره گر ماوس به ابتدای خط بعد می رود و منتظر تایپ می ماند. در html این کار امکان پذیر نیست. اگر می خواهید یک پاراگراف جدید شروع کنید، باید از تگ استفاده کنید. برای امتحان، متن زیر را در زیر عنوان وارد نمایید. (می توانید از متن دلخواه خود استفاده کنید). بعد از اتمام تایپ متن فوق، شما شبیه تصویر زیر خواهد بود: (نگران فضاهای اضافی چیدمان صفحه نباشید. ما برای زیبایی ضاهری در این کتاب این کار را کرده ایم. در html فضاهای اضافی مشابه یک فاصله تنها عمل می کنند). به تگ توجه کنید: هر زمان که می خواهید پاراگراف جدیدی شروع کنید باید از تگ استفاده کنید. تغییرات را ذخیره کنید و نتیجه را در مرورگر مشاهده کنید: به شکستن خط در متن فوق دقت کنید. همچنین توجه کنید که اگر چه در متن کدها فاصله هایی وجود داشت، اما آنها در مرورگر نمایش داده نمی شوند. مرورگر تمام فاصله های اضافی را حذف می کند. اگر فضای خالی احتیاج دارید، باید به مرورگر بگویید. این کار بوسیله تگهای P و BR انجام می شود که به زودی خواهید آموخت. بعنوان تمرین، تگ را از کد خود حذف کنید. تغییرات را ذخیره کرده و نتیجه را در مرورگر مشاهده نمایید. نتیجه مشابه تصویر زیر خو

مشاهده در مرورگر برای مشاهده نتیجه، در ویندوز به مسیر فایل ذخیره شده بروید. (مسیر html که قبلا ساخته بودیم). همانطور که در تصویر فوق مشاهده می کیند، یک فایل به نام firstwebpage.html موجود است. بر روی فایل html دوبار کلیک کنید تا مرورگر پیش فرض اجرا شود. مرورگر پیش فرض ما فایرفاکس می باشد. ممکن است مرورگر پیش فرض شما اینترنت اکسپلورر یا سافاری باشد. حال می بایست یک صفحه سفید و خالی با عنوانی که قبلا وارد کرده بودید در قسمت نوار عنوان نمایش داده شود. نسخه فایرفاکس: و همان صفحه در اینترنت اکسپلورر به شکل زیر است: توجه داشته باشید که در هر دو نسخه، عنوانی که اضافه کرده بودیم در نوار عنوان بالای پنجره نمایش داده می شود: "My First Page" همان عنوان کمی پائین تر، در بالای تب نیز به چشم می خورد. تمرین: تگ title را به عنوان دیگری به غیر از My First Page تغییر داده و تغییرات را ذخیره نمایید. به پنجره مرورگر بازگشته و کلید F5 را برای بروز رسانی صفحه فشار دهید. عنوان جدید شما باید در بالای صفحه و قسمت نوار عنوان ظاهر شود. در فصل بعدی با نحوه ایجاد قالب html آشنا خواهید شد. آموزش طراحی وب سایت از پایه>موضوعات مرتبط: <فصل اول > آموزش طراحی سایت از پایهبرچسبها: آموزش html , آموزش طراحی وب سایت از پایه , تگ ht

یک صفحه وب چیست؟ ذخیره صفحه وب برای ذخیره کدهای نوشته شده در قالب یک صفحه ، بر روی منوی File در بالای نرم افزار Notepad کلیک کرده و گزینه Save As را انتخاب نمایید. پنجره SaveAs نمایان خواهد شد. (یک پوشه جدید به نام HTML برای ذخیره تمام صفحات خود ایجاد کرده ایم). به پسوند پیش فرض در پائین این پنجره توجه کنید، در قسمت save as type عبارت Text Documents(*.txt) نمایش داده شده است. اگر نوع فایل به همین صورت باقی بماند، صفحه وبی نخواهید داشت. بلکه یک فایل متنی خواهید ساخت. بر روی لیست کشویی کلیک کنید و آنرا به "All Files" تغیر دهید. در قسمت نام فایل، تایپ کنید firstwebpage.html دقت داشته باشید که ما از حروف کوچک برای نام فایل استفاده کرده ایم. استفاده از حروف کوچک ضروری نیست اما بهتر است که اینطور باشد. همچنین سعی کنید از اضافه کردن "فاصله" در نام فایل خوداری کنید. زیرا ممکن است باعث بوجود آمدن برخی مشکلات گردد. همچنین می توانید از زیر خط و خط - برای نام گذاری استفاده نمایید. بنابراین هر دو نام زیر صحیح هستند. first_web_page.html first-web-page.html اما بهتر است از روش نامگذاری زیر اجتناب کنید: first web page.html FirstWebPage.html بر روی دکمه "save" کلیک کنید و حال یک خواهید داشت روی مرورگر قابل نمایش می باشد. در درس بعدی خواهید آموخت که

Html حاوی عناصری به نام تگ می باشد. تگها به صورت جفت استفاده می شوند، یک تگ آغاز و یک تگ پایان. اولین تگی که استفاده می کنیم تگ HTML می باشد. می بایست یک تگ html در ابتدا و تگی دیگر در انتها قرار داده شود. این تگ به مرورگری مانند اینترنت اکسپلورر یا فایرفاکس می گوید که کدهای نوشته به زبان html می باشند. در اینجا به دو نکته باید توجه داشت: اولا کلمه html داخل دو علامت> و تمامی تگها می بایست نکته اول را لحاظ کرده باشند و داخل علامت های > و حذف کردن یکی از این علامتها باعث بروز درهم ریختگی در صفحه خواهد شد. حال این دو تگ html را در محیط ویرایشگر متنی خود مشابه به تصویر زیر وارد کنید: تگ اول به مرورگر می گوید که عملیاتی را آغاز کند و تگ دوم می گوید عملیات را خاتمه دهد. علامت خاتمه "/" می باشد. بنابراین حذف یا فراموش کردن آن باعث بروز در هم ریختگی عناصر صفحه خواهد شد. جفت تک بعدی، تگهای HEAD هستند که داخل تگهای HTML قرار می گیرند: مجددا توجه داشته باشید که جفت تگهای head داخل علامت های > و مرورگر متنهایی که داخل تگ head قرار گرفته اند را نمایش نمی دهد و بعنوان مثال اگر بخواهید عبارت "Hellow World" را در صفحه نمایش دهید و آنرا داخل تگهای head قرار دهید، مرورگر آنها را نادیده می گیرد. دلیل آن اینست که "Hellow World" یک متن مستقیم ا

صفحه وب چیست؟ در این بخش، یاد می گیرید که یک صفحه وب چیست و چطور یک صفحه وب می تواند با یک مرورگر مانند فایرفاکس یا اینترنت اکسپلورر خوانده شود. همچنین می توانید اولین صفحه خود را ایجاد نمایید. پس شروع می کنیم ، فایلهای کامیپوتری دارای پسوند می باشند. اگر شما یک نامه با استفاده از نرم افزار متنی word ایجاد کرده اید و آنرا به نام "نامه من" ذخیره کرده اید، نرم افزار 4 کاراکتر به انتهای نام فایل شما اضافه می کند. با توجه به اینکه نرم افزار مورد استفاده شما word بوده است، 4 کاراکتری که به نام فایل شما افزوده می شود عبارتند از:".docx".بنابراین نام فایل شما ".docxنامه من"خواهد بود. چنانچه شما فایلی را با استفاده از صفحات گسترده"Excel" ایجاد کنید به نام "Account"، نرم افزار excel پسوند ".xlsx" خواهد بود. بنابراین نام فایل شما "Account.xlsx " خواهد بود. بنابراین با توجه به نرم افزارهای مختلف، پسوندهای مختلف برای فایلها ایجاد خواهد شد. این پسوندها اهمیت زیادی در کامپیوتر دارند. آنها برای شناسایی نوع فایل بکار می روند. با وجود پسوند فایل، نرم افزار word تشخیص می دهد که این فایل یک سند متنی است. با مشاهده پسوند.docx می گوید "بله!این فایل متعلق به من است!" همچنین اگر پسوند فایل xlsx باشد، می گوید: "این چه فایلی است؟" بنابراین ممکن است پیغام خطایی برای باز کردن فایل دریافت نمایید: نیز پسون

نرم افزار برای شروع ، کافیست که از یک ویرایشگر متنی ساده استفاده کنید. با این روش به جای اینکه با دکمه ها و ابزار های متعدد و مختلف درگیر شوید، بر روی کدنویسی متمرکز شوید. چنانچه از ویندوز استفاده می کنید، NotePad یک ویرایشگر متنی مناسب می باشد. برای اجرای آن، بر روی منوی start کلیک کنید و از مسیر Allprograms-Accessories، برنامه Notepad را انتخاب نمایید. نرم افزار شبیه تصویر زیر می باشد: کاربران مک و لینوکس ویرایشگرهای مختلفی در اختیار دارند که یکی از آنها نرم افزار Bluefish می باشد. در فصل بعدی نگاهی می اندازیم به ماهیت HTML و HTML5. آموزش طراحی وب سایت از پایه>موضوعات مرتبط: <فصل اول > آموزش طراحی سایت از پایهبرچسبها: طراحی صفحات وب سایت , آموزش طراحی وب سایت مقدماتی , آموزش طراحی وب سایت از پایه , نرم افزار طراحی صفحات وبتاريخ : چهارشنبه بیست و دوم آذر ۱۳۹۶ | 10:20 | نویسنده : yasICT |

شما می توانید به راحتی یک عنوان بزرگ و زیبا در صفحه وب خود ایجاد کنید. این کار با استفاده H انجام می شود. بزرگتر سایز عنوانی که می توانید داشته باشید تگ H1 است. با تغییر شماره ای که بعد از حرف H قرار دارد، سایزهای کوچکتری خواهید داشت. 6 سایز مختلف برای تگهای عنوان موجود است. تمام عنوانها می باست که داخل قرار بگیرند. تمرین را شروع کنید. کدهای فایل firstwebpage.html را باز کنید. (از فایل منو در برنامه notepad، گزینه open را انتخاب کنید) و عبارت زیر را درست بعد از اولین تگ BODY اضافه کنید. تگها به حروف کوچک و بزرگ حساس نیستند. بنابراین می توان عبارت فوق را اینگونه نوشت: یا حتی عبارت زیر: زمانی که تگ H1 را اضافه کردید، شما به شکل زیر خواهد بود: برای مشاهده نتیجه کار، محیط کاوشگر ویندوز را باز کرده و به مسیر فایل بروید و برروی آن دو بار کلیک نمایید. (اگر فایل شما از قبل در مرورگر اجرا شده است، کافی است کلید F5 را فشار دهید). پنجره مرورگر به شکل زیر خواهد بود. به قسمت کد ها برگردید و شماره 1 را به شماره 3 تغییر دهید. بنابراین تگ عنوان شما به صورت زیر خواهد شد. تغییرات را ذخیره کنید، به پنجره مرورگر بازگشته و کلید F5 را فشار دهید. تغییرات به صورت زیر خواهد بود: سایز عنوان H3 را با H1 مقایسه کنید. (اگر عنوان شما مناسب به نظر

طراحی در فایل html ای که در درس قبلی ایجاد کرده ایم را به وسیله NotePad باز کرده و عنوانی که در تگ title نوشته شده است را حذف کنید، سپس بر روی دکمه Save As از منوی File کلیک نمایید. در پنجره Save As، نام را به template.txt تغییر دهید. جهت ذخیره تغییرات در یک فایل متنی بر روی Save کلیک کنید. مجددا به محیط ویرایشگر بازگشته و از منوی File بر روی Save As کلیک کنید. حال نام فایل را به newpage.html تغییر دهید و در قسمت Save As type، از لیست کشویی All File را انتخاب کنید. فایل را ذخیره کنید و به مسیر فایل در ویندوز بروید. اکنون باید 3 فایل موجود باشد: یکی از این فایل ها به نام فایل template یک فایل متنی است. از این به بعد شما می توانید فایل متنی را باز کرده و مراحل بالا را تکرار نمایید: بر روی Save As از منوی File کلیک کنید، نوع فایل را در قسمت Save As type به All File تغییر دهید، سپس یک نام جدید برای صفحه خود وارد نمایید. مشکلی که وجود دارد اینست که اگر برروی فایل newpage.html دوبار کلیک کنید، فایل در یک مرورگر باز می شود. اما شما می خواهید که فایل را در NotePad باز کنید تا بتوانید برروی آن تغیرات انجام دهید. برای حل این مشکل شما می توانید آیتمی را به منوی Send to در ویندوز اضافه نمایید. (کامپیوت